<template>
  <div class="login-wrapper">
    <ClientTitleBar title="登录" class="login-title" />
    <MyCssDoodle />
    <div class="login-form-box">
      <el-alert
        class="my-alert"
        :title="loginAlterReadonly.title"
        :type="loginAlterReadonly.type"
        :closable="false"
        v-if="loginAlterReadonly.show"
      />
      <div class="login-rule-form">
        <h5 class="title">登录</h5>
        <el-form
          ref="loginRuleFormRef"
          style="max-width: 600px"
          :model="loginRuleForm"
          status-icon
          :rules="loginRules"
          label-width="auto"
          class="form-cont"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="loginRuleForm.userName"
              clearable
              autocomplete="off"
              placeholder="请输入用户名/账号"
            />
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input
              v-model="loginRuleForm.passWord"
              type="password"
              autocomplete="off"
              show-password
              clearable
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="captcha">
            <el-row :gutter="10" style="width: 100%">
              <el-col :span="15">
                <el-input
                  v-model="loginRuleForm.captcha"
                  placeholder="请输入验证码"
                  clearable
                />
              </el-col>
              <el-col :span="7" style="height: 30px">
                <img
                  :src="captchaReadonly"
                  height="30"
                  v-if="captchaReadonly"
                  class="captcha-img"
                />
              </el-col>
              <el-col :span="2" class="refresh-box">
                <el-icon @click="() => getImageCaptcha()" class="refresh"
                  ><Refresh
                /></el-icon>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="save-btn"
              :loading="loginSaveLoadingReadonly"
              @click="handleLogin(loginRuleFormRef)"
            >
              确认
            </el-button>
            <div class="remember-pass-register">
              <el-checkbox
                v-model="loginRuleForm.rememberPass"
                label="记住密码"
                size="small"
              />
              <span class="register-text" @click="router.replace('/register')"
                >注册</span
              >
            </div>
          </el-form-item>
        </el-form>
        <FormCover />
      </div>
    </div>
    <div class="ipc-box">
      备案号：<a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备2024079057号</a>
    </div>
  </div>
</template>
<script setup name="Login">
import { computed, inject, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Refresh } from '@element-plus/icons-vue';
import useSymbols from '../../compostions/useSymbols';
import MyCssDoodle from './MyCssDoodle.vue';
import FormCover from './FormCover.vue';
import ClientTitleBar from '../../components/ClientTitleBar/index.vue';

const router = useRouter();

const {
  loginRuleFormRef,
  loginRuleForm,
  loginRules,
  loginSaveLoadingReadonly,
  loginAlterReadonly,
  captchaReadonly,
  getImageCaptcha,
  loginSubmitForm,
} = inject(useSymbols);

const clientAppComputed = computed(() => {
  return window.myApi ? true : false;
});

onMounted(() => {
  getImageCaptcha();
});

const handleLogin = (loginRuleFormRef) => {
  loginSubmitForm(loginRuleFormRef, goHome);
};

const goHome = () => {
  router.replace({ path: '/' });
};
</script>
<style scoped lang="less">
.login-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  .login-title {
    position: absolute;
    top: 0;
    left: 0;
  }
  .login-form-box {
    position: absolute;
    top: calc(50% - 250px);
    left: calc(50% - 225px);
    width: 450px;
    height: 500px;
    background-color: var(--system-active-bg-color);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--system-primary-color);
    .my-alert {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11;
    }
    .login-rule-form {
      background-color: #fff;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      .title {
        width: 100%;
        box-sizing: border-box;
        color: #fff;
        font-size: 17px;
        line-height: 18px;
        width: 100%;
        background-color: var(--system-primary-color);
        padding: 15px;
        margin-top: 0;
      }
      .form-cont {
        padding: 15px 30px;
        .captcha-img {
          background-color: #fff;
        }
        .refresh-box {
          display: flex;
          align-items: center;
          justify-content: start;
          .refresh {
            font-size: 18px;
            cursor: pointer;
            transform: rotate(360deg);
            transition: 0.5s;
            &:active,
            &:after {
              transform: rotate(0);
              transition: 0s;
            }
          }
        }
        .save-btn {
          width: 100%;
          background-color: var(--system-primary-color);
          border: none;
          border-radius: 999px;
          margin-top: 50px;
          padding: 20px 0;
          &:hover {
            filter: brightness(1.1);
          }
        }
        .remember-pass-register {
          width: 100%;
          box-sizing: border-box;
          padding: 5px 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: var(--system-primary-color);
            border-color: var(--system-primary-color);
          }
          /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
            color: var(--system-primary-color);
          }
          .register-text {
            font-size: 13px;
            font-weight: 400;
            cursor: pointer;
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
}
.ipc-box{
  position:fixed;
  bottom: 10px;
  left: 0;
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  width: 100vw;
  a{
    color: #ffff;
  }
}
@keyframes refreshRotate {
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
